<template>
	<div class="blog-list-container" ref="container" v-loading="isLoading">
		<ul>
			<li v-for="item in datas.rows" :key="item.id">
				<div class="thumb" v-if="item.thumb">
					<RouterLink :to="{ name: 'BlogDetail', params: { blogId: item.id } }">
						<img v-lazy="item.thumb" :alt="item.title" :title="item.title" />
					</RouterLink>
				</div>
				<div class="main">
					<RouterLink :to="{ name: 'BlogDetail', params: { blogId: item.id } }">
						<h2>{{ item.title }}</h2>
					</RouterLink>
					<div class="aside">
						<span>日期：{{ formatDate(item.createDate) }}</span>
						<span>浏览：{{ item.scanNumber }}</span>
						<span>评论{{ item.commentNumber }}</span>
						<RouterLink
							:to="{
								name: 'CategoryBlog',
								params: { categoryId: item.category.id },
							}"
							>分类{{ item.category.name }}</RouterLink
						>
					</div>
					<div class="desc">
						{{ item.description }}
					</div>
				</div>
			</li>
		</ul>
		<!-- 分页放到这里 -->
		<Pager
			v-if="datas.total"
			:current="routeinfo.page"
			:limit="routeinfo.limit"
			:total="datas.total"
			:visibleNumber="10"
			@pagechange="handleChange"
		/>

		<!-- 当前没有博客列表数据 -->
		<Empty v-if="datas.rows.length === 0 && !isLoading" />
	</div>
</template>
<script>
import { getBlog } from "@/api/getBlog";
import fetchDatas from "@/mixins/fetchDatas";
import Pager from "@/components/Pager";
import { formatDate } from "@/utils";
import mainScroll from "@/mixins/mainScroll";
import Empty from "@/components/Empty";

export default {
	mixins: [fetchDatas({ total: 0, rows: [] }), mainScroll("container")],

	components: { Pager, Empty },
	computed: {
		routeinfo() {
			//获取路由信息
			const categoryId = +this.$route.params.categoryId || -1;
			const limit = +this.$route.query.limit || 10;
			const page = +this.$route.query.page || 1;
			return {
				categoryId,
				limit,
				page,
			};
		},
	},

	methods: {
		formatDate,
		//获取博客数据
		async fetchData() {
			return await getBlog(
				this.routeinfo.page,
				this.routeinfo.limit,
				this.routeinfo.categoryId
			);
		},
		handleChange(newPage) {
			const query = {
				limit: this.routeinfo.limit,
				page: newPage,
			};
			// 跳转到 当前的分类id  当前的页容量  newPage的页码
			if (this.routeinfo.categoryId === -1) {
				//当前没有分类
				// /article?page=${newPage}&limit=${this.routeInfo.limit}
				this.$router.push({
					name: "Blog",
					query,
				});
			} else {
				// /article/cate/${this.routeInfo.categoryId}?page=${newPage}&limit=${this.routeInfo.limit}
				this.$router.push({
					name: "CategoryBlog",
					query,
				});
			}
		},
	},
	watch: {
		async $route() {
			this.isLoading = true;
			//滚动高度为0
			this.$refs.container.scrollTop = 0;
			//更新页面数据
			this.datas = await this.fetchData();
			this.isLoading = false;
		},
	},
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.blog-list-container {
	line-height: 1.7;
	position: relative;
	padding: 20px;
	overflow-y: scroll;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	scroll-behavior: smooth;
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
}
li {
	display: flex;
	padding: 15px 0;
	border-bottom: 1px solid @gray;
	.thumb {
		flex: 0 0 auto;
		margin-right: 15px;
		img {
			display: block;
			max-width: 200px;
			border-radius: 5px;
		}
	}
	.main {
		flex: 1 1 auto;
		h2 {
			margin: 0;
		}
	}
	.aside {
		font-size: 12px;
		color: @gray;
		span {
			margin-right: 15px;
		}
	}
	.desc {
		margin: 15px 0;
		font-size: 14px;
	}
}
</style>
